<template>
     <!-- 上面的饼状图 -->
    <div class="componentsbox">
        <div class="pietop" ref="pietop"></div>
        <div class="pietop-title">
            <span>{{title}}</span>
        </div>
    </div>   
</template>

<style  rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";
    .componentsbox{
        height: 100%;
    }
    .pietop-title{
        position: absolute;
        top: 10px;
        left: 25px;
        font-size: 24px;
        color: #ffffff
    }
    .pietop{
        width: 90%;
        height: 100%;
        margin-left: 10%;
    }
</style>

<script>
import echarts from "echarts";
import axios from 'axios'
const datas = [{name:'因病',value:100},{name:'意外',value:600}];
export default {
    props:{
        title:{
            type: String,
            default: '15412'
        },
        iconType:{
            type: String,
            default: ''
        },
        legenddata:{
            type:Array,
            default: []
        },
        seriesData: {
            type: Array,
            default: []
        }
    },
    data() {
        return{
            myChartPie: null,
            // 饼状图1
            optionpie: {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: { //图例
                    type: 'scroll',
                    orient: 'vertical', 
                    icon: this.iconType,
                    itemWidth: 25,　
                    itemGap: 15,
                    x: '0',
                    y: '60',
                    textStyle: {　
                        color: 'red',　　　　　　　　
                        fontSize: 14,
                        fontFamily: "Microsoft YaHei",
                    },
                    data:this.legenddata,
                    formatter:  function(name){
                        var res = "";
                        for(var i=0;i<datas.length;i++) {
                           if (datas[i].name == name) {  
                                res=datas[i].value;
                                datas[i].color = 'red'
                           }
                        }
                        return name+'  '+res;
                    }
                },
                color: ['#00faff','#00febc','#ff6742','#ffc63b','#ffec54','#9bf49f'],
                series: [
                    {
                        name:'访问来源',
                        type:'pie', //环形图的type和饼图相同
                        center: ['60%', '50%'],  //控制饼图的位置，第一个值是左右的，第二个值是上下的
                        radius: ['85%', '45%'], //饼图的半径，第一个为内半径，第二个为外半径
                        avoidLabelOverlap: false,
                        data: this.seriesData,

                        label: {
                            normal: { //正常的样式
                                show: false,
                                position: 'center'
                            },
                            emphasis: { //选中时候的样式
                                show: true,
                                textStyle: {
                                    fontSize: '22',
                                    fontWeight: 'bold',
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: true,
                            }
                        }
                    }
                ]
            },
        }
    },
    mounted(){
        this.myChartPie = echarts.init(this.$refs.pietop);
        this.myChartPie.setOption(this.optionpie);
    }
}
</script>
